<template>
  <div class="article-edit">
    <div class="page-header">
      <h1 class="page-title">{{ isEdit ? '编辑文章' : '创建文章' }}</h1>
      <div class="page-actions">
        <button class="save-btn secondary-btn" @click="saveAsDraft">
          <i class="fas fa-save"></i> 保存草稿
        </button>
        <button class="publish-btn primary-btn" @click="publishArticle">
          <i class="fas fa-paper-plane"></i> {{ isEdit ? '更新文章' : '发布文章' }}
        </button>
      </div>
    </div>
    
    <div class="edit-container">
      <!-- 文章基本信息 -->
      <div class="article-meta">
      <div class="form-group">
          <label for="article-title">文章标题 <span class="required">*</span></label>
        <input 
          type="text" 
            id="article-title" 
          v-model="article.title" 
          required
            placeholder="输入文章标题"
            class="title-input"
          >
      </div>
      
        <div class="form-row">
      <div class="form-group">
            <label for="article-category">分类 <span class="required">*</span></label>
            <select id="article-category" v-model="article.categoryId" required>
              <option value="">选择分类</option>
            <option v-for="category in categories" :key="category.id" :value="category.id">
              {{ category.name }}
            </option>
          </select>
      </div>
      
      <div class="form-group">
            <label>添加标签</label>
            <div class="tag-input">
              <div class="tag-list">
                <span v-for="(tag, index) in article.tags" :key="index" class="tag-item">
                  {{ tag }}
                  <button type="button" class="remove-tag" @click="removeTag(index)">
                    <i class="fas fa-times"></i>
                  </button>
                </span>
              </div>
              <div class="tag-add">
          <input 
            type="text" 
                  v-model="newTag" 
                  placeholder="输入标签后按回车"
                  @keydown.enter.prevent="addTag"
                >
                <button type="button" class="add-tag-btn" @click="addTag">
                  <i class="fas fa-plus"></i>
                </button>
        </div>
          </div>
        </div>
      </div>
      
      <div class="form-group">
          <label for="article-summary">文章摘要</label>
        <textarea 
            id="article-summary" 
            v-model="article.summary" 
            rows="2"
            placeholder="简短描述文章内容，不填将自动提取正文前100个字"
        ></textarea>
      </div>
      
      <div class="form-group">
          <label for="article-cover">封面图</label>
          <div class="cover-upload-wrapper">
            <input 
              type="url" 
              id="article-cover" 
              v-model="displayCoverUrl" 
              :placeholder="isLocalImage ? '已上传本地图片' : '输入封面图片URL或点击右侧按钮上传'"
              class="cover-input"
              @input="handleCoverUrlInput"
            >
            <button type="button" class="upload-cover-btn" @click="triggerCoverUpload">
              <i class="fas fa-cloud-upload-alt"></i> 上传图片
            </button>
            <input 
              type="file" 
              ref="coverUploadInput" 
              @change="handleCoverUpload" 
              accept="image/*" 
              style="display: none"
            >
      </div>
          <div v-if="article.coverImage" class="image-preview">
            <img :src="article.coverImage" alt="封面预览">
            <button type="button" class="remove-cover-btn" @click="removeCoverImage">
              <i class="fas fa-times"></i>
            </button>
        </div>
        </div>
      </div>
      
      <!-- Markdown编辑器 -->
      <div class="editor-container">
        <!-- 使用WangEditor富文本编辑器 -->
        <div class="editor-wrapper" style="height: 600px;">
          <div id="editor-toolbar" class="toolbar-container"></div>
          <div id="editor-content" class="editor-content"></div>
        </div>
      </div>
      
      <!-- 发布设置 -->
      <div class="publish-settings">
        <div class="form-row">
          <div class="form-group">
            <label>是否允许评论</label>
            <div class="toggle-switch">
              <input 
                type="checkbox" 
                id="allow-comments" 
                v-model="article.allowComments"
              >
              <label for="allow-comments" class="toggle-label"></label>
            </div>
      </div>
          
          <div class="form-group">
            <label>是否置顶文章</label>
            <div class="toggle-switch">
              <input 
                type="checkbox" 
                id="is-pinned" 
                v-model="article.isPinned"
              >
              <label for="is-pinned" class="toggle-label"></label>
            </div>
          </div>
          
          <div class="form-group">
            <label for="publish-time">发布时间</label>
            <input 
              type="datetime-local" 
              id="publish-time" 
              v-model="article.publishTime"
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入WangEditor
import { createEditor, createToolbar } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css'

export default {
  name: 'ArticleEdit',
  data() {
    return {
      isEdit: false,
      article: {
        id: null,
        title: '',
        content: '', // 存储HTML内容
        summary: '',
        coverImage: '',
        categoryId: '',
        tags: [],
        status: 'draft', // draft, published
        allowComments: true,
        isPinned: false,
        publishTime: this.formatDateTime(new Date())
      },
      categories: [],
      newTag: '',
      editor: null, // WangEditor实例
      isLocalImage: false, // 标记是否为本地上传的图片
      displayCoverUrl: '', // 用于显示的封面URL
    };
  },
  computed: {
    // 移除renderedContent计算属性
  },
  created() {
    // 如果是编辑模式，获取文章ID并加载数据
    const articleId = this.$route.params.id;
    if (articleId) {
      this.isEdit = true;
      this.fetchArticle(articleId);
    }
    
    // 加载分类列表
    this.fetchCategories();
  },
  mounted() {
    // 初始化WangEditor
    this.initEditor();
  },
  beforeUnmount() {
    // 销毁编辑器
    if (this.editor) {
      this.editor.destroy();
    }
  },
  methods: {
    // 初始化WangEditor
    initEditor() {
      // 创建编辑器实例
      const editorConfig = {
        placeholder: '请输入内容...',
        onChange: (editor) => {
          // 获取HTML内容
          this.article.content = editor.getHtml();
        },
        MENU_CONF: {
          uploadImage: {
            // 图片上传配置...
            server: '/api/upload', // 替换为您的上传接口
            fieldName: 'file',
            maxFileSize: 5 * 1024 * 1024, // 5MB
            // 上传成功回调
            customInsert(res, insertFn) {
              // res为服务端返回的结果
              // insertFn为插入图片的函数
              const url = res.data.url;
              insertFn(url);
            }
          },
          fontFamily: {
            fontFamilyList: [
              { name: '宋体', value: '宋体, SimSun, serif' },
              { name: '黑体', value: '黑体, SimHei, sans-serif' },
              { name: '微软雅黑', value: '微软雅黑, Microsoft YaHei, sans-serif' },
              { name: '楷体', value: '楷体, KaiTi, serif' },
              { name: '仿宋', value: '仿宋, FangSong, serif' },
              { name: 'Arial', value: 'Arial, sans-serif' },
              { name: 'Times New Roman', value: 'Times New Roman, serif' },
              { name: 'Courier New', value: 'Courier New, monospace' }
            ]
          },
          fontSize: {
            fontSizeList: [
              { name: '12px', value: '12px' },
              { name: '14px', value: '14px' },
              { name: '16px', value: '16px' },
              { name: '18px', value: '18px' },
              { name: '20px', value: '20px' },
              { name: '24px', value: '24px' },
              { name: '28px', value: '28px' },
              { name: '32px', value: '32px' },
              { name: '36px', value: '36px' }
            ]
          },
          emotion: {
            emotionList: [
              { title: '表情', type: 'emoji', content: '😀 😃 😄 😁 😆 😅 😂 🤣 🥲 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜' },
              { title: '符号', type: 'symbol', content: '© ® ™ & @ § # ¥ $ € £ ¢ % ‰ ‱ + − × ÷ = ≠ > < ≥ ≤ ± ≈ ~ ¬ ⁄ | \ « » < > ≪ ≫' }
            ]
          },
          insertTable: {
            rowMax: 10,
            colMax: 10
          }
        }
      };
      
      // 创建编辑器
      this.editor = createEditor({
        selector: '#editor-content',
        html: this.article.content,
        config: editorConfig,
        mode: 'default' // 或 'simple' 简洁模式
      });
      
      // 恢复工具栏为扁平数组格式
      const toolbarConfig = {
        toolbarKeys: [
          'headerSelect',
          'fontFamily',
          'fontSize',
          '|',
          'bold',
          'italic',
          'underline',
          'through',
          'color',
          'bgColor',
          '|',
          'bulletedList',
          'numberedList',
          'todo',
          'justifyLeft',
          'justifyCenter',
          'justifyRight',
          'justifyJustify',
          'indent',
          'delIndent',
          '|',
          'insertLink',
          'uploadImage',
          'insertTable',
          'insertVideo',
          '|',
          'blockquote',
          'code',
          'codeBlock',
          'divider',
          '|',
          'emotion',
          'clearStyle',
          'fullScreen'
        ]
      };
      
      // 创建工具栏实例
      createToolbar({
        editor: this.editor,
        selector: '#editor-toolbar',
        config: toolbarConfig,
        mode: 'default'
      });
    },
    
    // 获取文章详情
    async fetchArticle(id) {
      try {
        // 这里替换为实际API调用
        // const response = await articleService.getById(id);
        // this.article = response.data;
        
        // 模拟数据
        this.article = {
          id: id,
          title: '如何使用Java Stream API提高代码可读性',
          content: '<h1>Java Stream API简介</h1><p>Stream API是Java 8引入的一个重要特性，它允许以声明式方式处理集合。</p><h2>主要优点</h2><ul><li>代码更加简洁</li><li>支持并行处理</li><li>提高代码可读性</li></ul><pre><code class="language-java">// 传统方式\nList&lt;String&gt; filtered = new ArrayList&lt;&gt;();\nfor (String s : strings) {\n    if (s.startsWith("a")) {\n        filtered.add(s);\n    }\n}\n\n// 使用Stream\nList&lt;String&gt; filtered = strings.stream()\n    .filter(s -> s.startsWith("a"))\n    .collect(Collectors.toList());</code></pre><h2>常用操作</h2><ol><li>filter: 过滤元素</li><li>map: 转换元素</li><li>sorted: 排序</li><li>collect: 收集结果</li></ol>',
          summary: 'Java 8的Stream API是处理集合的强大工具，本文详细介绍了Stream API的使用方法和优势。',
          coverImage: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c',
          categoryId: '1',
          tags: ['Java', 'Stream API', '函数式编程'],
          status: 'published',
          allowComments: true,
          isPinned: false,
          publishTime: '2023-05-15T14:30'
        };
        
        // 设置显示的封面URL
        if (this.article.coverImage) {
          // 判断是否为base64图片
          if (this.article.coverImage.startsWith('data:image')) {
            this.isLocalImage = true;
            this.displayCoverUrl = '';
          } else {
            this.displayCoverUrl = this.article.coverImage;
            this.isLocalImage = false;
          }
        }
        
        // 获取到文章数据后，更新编辑器内容
        if (this.editor) {
          this.editor.setHtml(this.article.content);
        }
      } catch (error) {
        console.error('获取文章失败:', error);
        this.$message && this.$message.error('获取文章失败');
      }
    },
    
    // 获取分类列表
    async fetchCategories() {
      try {
        // 这里替换为实际API调用
        // const response = await categoryService.getAll();
        // this.categories = response.data;
        
        // 模拟数据
        this.categories = [
          { id: '1', name: 'Java' },
          { id: '2', name: 'Python' },
          { id: '3', name: '前端开发' },
          { id: '4', name: '数据库' },
          { id: '5', name: '系统架构' }
        ];
      } catch (error) {
        console.error('获取分类失败:', error);
      }
    },
    
    // 添加标签
    addTag() {
      if (this.newTag.trim()) {
        if (!this.article.tags.includes(this.newTag.trim())) {
          this.article.tags.push(this.newTag.trim());
        }
        this.newTag = '';
      }
    },
    
    // 移除标签
    removeTag(index) {
      this.article.tags.splice(index, 1);
    },
    
    // 处理封面URL输入
    handleCoverUrlInput() {
      // 当用户输入新URL时，更新文章封面图并重置本地图片标记
      this.article.coverImage = this.displayCoverUrl;
      this.isLocalImage = false;
    },
    
    // 触发封面图上传
    triggerCoverUpload() {
      this.$refs.coverUploadInput.click();
    },
    
    // 处理封面图上传
    async handleCoverUpload(event) {
      const file = event.target.files[0];
      if (!file) return;
      
      // 验证文件类型
      if (!file.type.match('image.*')) {
        alert('请上传图片文件');
        return;
      }
      
      // 验证文件大小 (最大5MB)
      if (file.size > 5 * 1024 * 1024) {
        alert('图片大小不能超过5MB');
        return;
      }
      
      try {
        // 这里应该调用实际的上传API
        // const formData = new FormData();
        // formData.append('file', file);
        // const response = await axios.post('/api/upload', formData);
        // this.article.coverImage = response.data.url;
        // this.displayCoverUrl = ''; // 清空显示的URL
        // this.isLocalImage = true;
        
        // 模拟上传成功
        const reader = new FileReader();
        reader.onload = (e) => {
          this.article.coverImage = e.target.result;
          this.displayCoverUrl = ''; // 清空显示的URL
          this.isLocalImage = true; // 标记为本地图片
          console.log('封面图上传成功(模拟)');
        };
        reader.readAsDataURL(file);
      } catch (error) {
        console.error('封面图上传失败:', error);
        alert('封面图上传失败，请重试');
      }
      
      // 清空input，以便于重复上传同一张图片
      event.target.value = '';
    },
    
    // 移除封面图
    removeCoverImage() {
      this.article.coverImage = '';
      this.displayCoverUrl = '';
      this.isLocalImage = false;
    },
    
    // 格式化日期时间
    formatDateTime(date) {
      if (!date) return '';
      
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      const hours = String(d.getHours()).padStart(2, '0');
      const minutes = String(d.getMinutes()).padStart(2, '0');
      
      return `${year}-${month}-${day}T${hours}:${minutes}`;
    },
    
    // 保存为草稿
    async saveAsDraft() {
      try {
        this.article.status = 'draft';
        await this.saveArticle();
        this.$message && this.$message.success('草稿已保存');
      } catch (error) {
        console.error('保存草稿失败:', error);
      }
    },
    
    // 发布文章
    async publishArticle() {
      // 验证必填字段
      if (!this.article.title.trim()) {
        alert('请输入文章标题');
        return;
      }
      
      if (!this.article.categoryId) {
        alert('请选择文章分类');
        return;
      }
      
      if (!this.article.content.trim()) {
        alert('请输入文章内容');
        return;
      }
      
      try {
        this.article.status = 'published';
        await this.saveArticle();
        this.$message && this.$message.success(this.isEdit ? '文章已更新' : '文章已发布');
        this.$router.push('/admin/articles');
      } catch (error) {
        console.error('发布文章失败:', error);
      }
    },
    
    // 保存文章
    async saveArticle() {
      // 如果没有摘要，自动生成
      if (!this.article.summary.trim() && this.article.content) {
        // 从HTML中提取纯文本
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = this.article.content;
        const plainText = tempDiv.textContent || tempDiv.innerText || '';
        this.article.summary = plainText.substring(0, 100) + (plainText.length > 100 ? '...' : '');
      }
      
      try {
        // 这里替换为实际API调用
        if (this.isEdit) {
          // await articleService.update(this.article.id, this.article);
          console.log('更新文章:', this.article);
        } else {
          // const response = await articleService.create(this.article);
          // this.article.id = response.data.id;
          console.log('创建文章:', this.article);
        }
        
        return true;
      } catch (error) {
        console.error('保存文章失败:', error);
        alert('保存文章失败，请稍后重试');
        return false;
      }
    }
  }
};
</script>

<style>
/* WangEditor全局样式 - 需要在style标签中添加scoped={false}以使这些样式生效 */
.w-e-toolbar {
  flex-wrap: wrap !important;
  padding: 8px 10px !important;
  height: auto !important;
  overflow: visible !important;
}

.w-e-bar-item {
  margin: 4px 3px !important;
}

.w-e-bar-divider {
  height: 20px !important;
  margin: 4px 8px !important;
}

.w-e-text-container {
  height: 560px !important;
}

/* 编辑器内容区域添加底部空白 */
.w-e-text-container .w-e-scroll {
  padding-bottom: 150px !important; /* 底部增加大量空白区域 */
}

/* 增加编辑器编辑区域最小高度 */
.w-e-text-container .w-e-scroll p:last-child {
  margin-bottom: 120px !important; /* 确保最后一个段落后有足够空间 */
}

.w-e-full-screen-container {
  z-index: 1001 !important;
}
</style>

<style scoped>
.article-edit {
  padding: 20px 0;
  /* 确保只有一个主滚动条 */
  overflow-x: hidden;
  max-width: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  /* 确保与下方内容对齐 */
  padding: 0 25px;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--dark-text);
  margin: 0;
}

.page-actions {
  display: flex;
  gap: 15px;
}

.primary-btn {
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(67, 97, 238, 0.2);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(67, 97, 238, 0.3);
}

.secondary-btn {
  background: #f5f7fb;
  color: var(--dark-text);
  border: 1px solid #e0e0e0;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.secondary-btn:hover {
  background: #e9ecef;
}

.edit-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
  /* 确保内容与顶部对齐 */
  padding: 0 25px;
}

/* 文章元信息区域 */
.article-meta {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form-group {
  margin-bottom: 20px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-text);
}

.required {
  color: var(--danger-color);
}

input, select, textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.title-input {
  font-size: 18px;
  font-weight: 600;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

/* 封面图上传样式 */
.cover-upload-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.cover-input {
  flex-grow: 1;
}

.upload-cover-btn {
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
  border: none;
  padding: 0 15px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.upload-cover-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(67, 97, 238, 0.3);
}

.image-preview {
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  height: 200px;
  position: relative;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 改为contain确保整个图片可见 */
  display: block;
}

.remove-cover-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.remove-cover-btn:hover {
  background: rgba(220, 53, 69, 0.8);
  transform: scale(1.1);
}

/* 标签输入样式 */
.tag-input {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px;
  background-color: white;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #f0f4ff;
  color: var(--primary-color);
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
}

.remove-tag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  color: #666;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.remove-tag:hover {
  background: var(--danger-color);
  color: white;
}

.tag-add {
  display: flex;
  gap: 10px;
}

.tag-add input {
  flex-grow: 1;
}

.add-tag-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: #f5f7fb;
  border: 1px solid #e0e0e0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.add-tag-btn:hover {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* 编辑器样式 */
.editor-container {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 25px;
}

.toolbar-container {
  border-bottom: 1px solid #f1f1f1;
  background-color: #fafafa;
  padding: 0;
  overflow: visible;
}

.editor-content {
  min-height: 500px;
  overflow-y: auto;
  padding: 0 15px 15px; /* 增加底部内边距 */
  font-size: 16px;
  line-height: 1.6;
}

/* 发布设置样式 */
.publish-settings {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 25px; /* 底部间距确保有足够空间 */
}

/* 修复切换开关样式 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  vertical-align: middle;
  margin-left: 10px;
}

.form-group .toggle-switch {
  /* 重要：确保开关浮动在右侧 */
  float: right;
  margin-top: -30px; /* 通过负margin上移开关 */
}

.form-group label + .toggle-switch {
  margin-top: 0; /* 重置同级元素的margin */
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 22px;
}

.toggle-label:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-label {
  background-color: var(--primary-color);
}

input:checked + .toggle-label:before {
  transform: translateX(22px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .form-group .toggle-switch {
    /* 在移动端调整位置 */
    float: none;
    margin-top: 0;
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }

  .editor-wrapper {
    flex-direction: column;
  }
  
  .editor, .preview {
    flex: none;
    height: 300px;
  }
  
  .editor {
    border-right: none;
    border-bottom: 1px solid #eee;
  }

  .toolbar {
    flex-wrap: wrap;
  }
  
  .toolbar-group {
    margin-bottom: 5px;
  }

  .page-actions {
    flex-direction: column;
    gap: 10px;
  }
}
</style> 